<!--
 * @Author       : wfl
 * @LastEditors  : wfl
 * @description  :
 * @updateInfo   :
 * @Date         : 2023-06-28 14:53:58
 * @LastEditTime : 2024-01-26 11:20:33
-->
<script lang="ts" setup name="IkTip">
import type { PropType } from 'vue'
import { QuestionFilled } from '@element-plus/icons-vue'

defineProps({
  content: {
    type: String,
    default: ''
  },
  title: {
    type: String,
    default: ''
  },
  width: {
    type: Number,
    default: 200
  },
  placement: {
    type: String as PropType<'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'right' | 'right-start' | 'right-end'>,
    default: 'top' // top/top-start/top-end/bottom/bottom-start/bottom-end/left/left-start/left-end/right/right-start/right-end
  },
  trigger: {
    type: String as PropType<'click' | 'focus' | 'hover' | 'contextmenu'>,
    default: 'hover' // click/focus/hover/contextmenu
  },
  size: {
    type: Number,
    default: 20
  }
})
</script>

<template>
  <el-popover
    :placement="placement"
    :title="title"
    :width="width"
    :trigger="trigger"
    :content="content"
  >
    <template #reference>
      <div style="color:var(--ik-main-icon-deep-color);">
        <el-icon :size="size"><QuestionFilled /></el-icon>
      </div>
    </template>
  </el-popover>
</template>
